<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>09背景</title>
    <style>
        .box1{
            width: 500px;
            height: 500px;
            background-color: #afb;
            background-image:url(./resource/background-picture01.jpg) ;
            background-repeat:no-repeat;
            background-position: top center;
            /* 
                设置背景范围
                    background-clip
                        可选值：
                            border-box 默认值，背景会出现在边框的下边
                            padding-box 背景不会出现在边框下边，只出现在内容区和内边距下边
                            content-box 背景只出现在内容区下边
                    background-origin 背景图片的偏移量计算的原点：
                        padding-box 默认值，原点从内边距处开始计算
                        content-box 背景图片的偏移量从内容区处开始计算
                        border-box 背景图片的变量从边框处开始计算
            */
            background-clip: padding-box;
            border: 10px red double;
            /* background-size 设置背景图片大小
                    第一个值表示宽度，第二个表示高度，可以写百分比的值
                    如果只写一个，则第二个是默认的（auto）
                    cover 背景图片比例不变，将元素铺满
            */
            background-size: 500px 300px;
            /* 
            background-attachment 设置背景图片是否跟随元素移动
                可选值：
                    scroll 默认值，背景跟随图片移动
                    fixed 背景固定在页面中，不会跟随元素移动
            */
            /* 上面这些都可以用 background 直接设置，没有顺序要求 */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>